﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/city-picker.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />


<div class="mainCont">


    <div>
        <label>选择地点:</label>
    </div>
    <div class="">-----------------------------</div>
    <div>
        <label>选择产品</label>
        <input type="text" id="ProductName" value="" placeholder="请输入" class="autocomplete" />
        <input type="hidden" id="Productid" />
    </div>
    <div>
        <label>选择农作物</label>
        <input type="text" id="CorptName" value="" placeholder="请输入" class="autocomplete" />
        <input type="hidden" id="Corptid" />
    </div>
    <div>
        <label>状态</label>
    </div>
    <div class="content">
        <ul>
            <li >
                北京
            </li>
            <li href="javascript:void(0);">
                上海
            </li>
            <li href="javascript:void(0);">
                北京
            </li>
            <li href="javascript:void(0);">
                上海
            </li>
            <li href="javascript:void(0);">
                北京
            </li>
            <li href="javascript:void(0);">
                上海
            </li>
        </ul>
        @*<div class="mt">
                <ul class="tab">
                    <li data-index="0" data-widget="tab-item" class="curr">
                        <a href="#none" class="hover"><em>北京</em><i></i></a>
                    </li>
                    <li data-index="1" data-widget="tab-item" style="display: none;" class=""><a href="#none" class=""><em>请选择</em><i></i></a></li>
                    <li data-index="2" data-widget="tab-item" style="display: none;" class=""><a href="#none" class=""><em>请选择</em><i></i></a></li>
                    <li data-index="3" data-widget="tab-item" style="display:none;">
                        <a href="#none" class=""><em>请选择</em><i></i></a>
                    </li>
                </ul>
                <div class="stock-line"></div>
            </div>*@
        @*<div class="mc" data-area="0" data-widget="tab-content" id="stock_province_item" style="display: block;">
                <ul class="area-list">
                    <li><a href="#none" data-value="1">北京</a></li>
                    <li><a href="#none" data-value="2">上海</a></li>
                    <li><a href="#none" data-value="3">天津</a></li>
                    <li><a href="#none" data-value="4">重庆</a></li>
                    <li><a href="#none" data-value="5">河北</a></li>
                    <li><a href="#none" data-value="6">山西</a></li>
                    <li><a href="#none" data-value="7">河南</a></li>
                    <li><a href="#none" data-value="8">辽宁</a></li>
                    <li><a href="#none" data-value="9">吉林</a></li>
                    <li><a href="#none" data-value="10">黑龙江</a></li>
                    <li><a href="#none" data-value="11">内蒙古</a></li>
                    <li><a href="#none" data-value="12">江苏</a></li>
                    <li><a href="#none" data-value="13">山东</a></li>
                    <li><a href="#none" data-value="14">安徽</a></li>
                    <li><a href="#none" data-value="15">浙江</a></li>
                </ul>
            </div>
            <div class="mc" data-area="1" data-widget="tab-content" id="stock_city_item" style="display: none;">
                <ul class="area-list">
                    <li><a href="#none" data-value="72">朝阳区</a></li>
                    <li><a href="#none" data-value="2800">海淀区</a></li>
                    <li><a href="#none" data-value="2801">西城区</a></li>
                    <li><a href="#none" data-value="2802">东城区</a></li>
                    <li><a href="#none" data-value="2803">崇文区</a></li>
                    <li><a href="#none" data-value="2804">宣武区</a></li>
                    <li><a href="#none" data-value="2805">丰台区</a></li>
                    <li><a href="#none" data-value="2806">石景山区</a></li>
                    <li><a href="#none" data-value="2807">门头沟</a></li>
                    <li><a href="#none" data-value="2808">房山区</a></li>
                    <li><a href="#none" data-value="2809">通州区</a></li>
                    <li><a href="#none" data-value="2953">平谷区</a></li>
                </ul>
            </div>
            <div class="mc" data-area="2" data-widget="tab-content" id="stock_area_item" style="display: none;">
                <div class="iloading">
                    正在加载中，请稍候...
                </div>
            </div>
            <div class="mc" data-area="3" data-widget="tab-content" id="stock_town_item" style="display: none;">

            </div>*@

    </div>
</div>

<script type="text/javascript">
   $.ready()


</script>
<style type="text/css">
    .mainCont {
        position: absolute;
        left: 260px;
        right: 0;
        top: 146px;
        bottom: 0;
        padding-right: 20px;
        min-width: 940px;
        overflow: hidden;
    }

    .content ul {
        width: 500px;
        list-style: none;
    }

        .content ul li {
            width: 100px;
            float: left;
            margin-right: 15px;
            line-height: 20px;
            background:rgba(0,0,0,0.3);
        }

            .content ul li:hover {
                background: #3485C0;
                color:#85BEE5;
                text-decoration: none;
            }
            .content ul li:active {
                background: #3485C0;
                color:#85BEE5;
                text-decoration: none;
            }
</style>
<style type="text/css">
    .demo {
        width: 620px;
        margin: 20px auto;
    }


    /* citySelector */
    .citySelector {
        font: 12px/1.5 tahoma,arial,\5b8b\4f53;
        background: #fff;
        text-align: left;
    }

    .cityslide {
        width: 250px;
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid #85BEE5;
        border-right-color: #3485C0;
        border-bottom-color: #3485C0;
        box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
        margin-top: -2px;
    }

        .cityslide li {
            list-style: none;
            overflow: hidden;
            height: 16px;
            padding: 4px 5px;
        }

            .cityslide li.on {
                background: #9CD9FF;
                color: #fff;
            }

            .cityslide li b {
                font-weight: normal;
            }

            .cityslide li.empty {
                background: #fff2e8;
                color: #666;
            }

                .cityslide li.empty em {
                    color: red;
                    font-style: normal;
                }

    .cityname {
        float: left;
    }

    .cityspell {
        float: right;
    }

    .cityBox {
        width: 320px;
        border: 1px solid #85BEE5;
        overflow: hidden;
        box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    }

        .cityBox ul {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

            .cityBox ul li {
                float: left;
                list-style: none;
                padding: 2px 4px;
                border: 1px solid #85BEE5;
                cursor: pointer;
                margin-left: 4px;
                display: inline;
                background: #E1EFFE;
            }

                .cityBox ul li.on {
                    background: #fff;
                    border-bottom-color: #fff;
                    position: relative;
                }

    .hide {
        display: none;
    }

    p.tip {
        color: #666;
        line-height: 20px;
        padding: 5px;
        margin: 0;
        text-indent: 3px;
    }

    .hotCity {
        border-top: 1px solid #85BEE5;
        margin-top: -1px;
        clear: left;
        overflow: hidden;
        padding-bottom: 5px;
        padding-top: 5px;
        _margin-bottom: 8px;
    }

    .cityTab {
        overflow: hidden;
    }

        .cityTab dl {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

            .cityTab dl dt {
                float: left;
                padding-left: 3px;
                color: #F30;
                text-indent: 5px;
                font-family: "Lucida console","consolas","courier new";
                line-height: 22px;
                font-size: 14px;
                width: 20px;
            }

            .cityTab dl dd {
                margin-left: 2px;
                float: left;
                width: 290px;
            }

                .cityTab dl dd a {
                    padding-left: 5px;
                    width: 66px;
                    line-height: 22px;
                    display: inline-block;
                    color: #000;
                    text-decoration: none;
                }

                    .cityTab dl dd a:hover {
                        text-decoration: underline;
                        color: red;
                    }

    .cityinput {
        border-width: 1px;
        border-style: solid;
        border-color: #666 #ccc #ccc #666;
        height: 24px;
        line-height: 24px;
        width: 175px;
        font-size: 12px;
        padding-left: 2px;
    }
    .blue{background-color:blue;}
</style>

<script>
    //$('.foo').datapicker({
    //    onCityChange: function (city) {
    //        console.log(city);
    //    }
    //});
    $('li').click(function (e) {
        var $li = $(e.target);

        // 当前是“已选”，则取消选择，否则是“未选”，则选择并且给识别，说明是选择中
        // 已选用红色，否则用白色（也就是默认）
        if ($li.data('select') === true)
            $li.css('backgroundColor', 'white').data('select', null);
        else
            $li.css('backgroundColor', 'red').data('select', true);

    });
</script>

@*{
      cityListAPI: '',    // 城市列表接口地址, 默认为空,
                            设置值之后会从接口获取城市列表,接口格式参考cityList
      dataType: 'json',   // $.ajax()请求城市列表接口的dataType参数,默认`json`
      cityList: [         // 城市列表,用于渲染tab, 每一个对象为一个tab
        {
          title: 'ABCD',  // tab的标题
          list: [         // tab下的城市列表
            {
              name: '安徽',   // 城市名称
              id: '33'       // 城市id
            },
            {
              name: '北京',
              id: '34'
            }
          ]
        },
        defaultCity: {    // 默认选中的城市, 当前版本以id进行匹配
          id: 1,
          name: '北京'
        },
        {
          title: 'EFGH',
          list: [
            {
              name: '福建',
              id: '38'
            },
            {
              name: '合肥',
              id: '39'
            }
          ]
        }
      ],
      showHot: true,          // 是否显示热门城市, 如果true,将显示hotList内的城市
      showTab: true,          // 是否显示tab功能,
                                  如果true,将显示cityList或服务器返回的列表
      onCityChange: $.noop,   // 城市变化时执行的回调, 回调接收参数为city对象,
                                  包含id和name属性
      hotList: [             // 热门城市列表
        {
          id: 1,
          name: '北京'
        },
        {
          id: 2,
          name: '上海'
        },
        {
          id: 3,
          name: '广州'
        }
      ]
    };*@